<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拍照室程序</title>
</head>
<style>
    video, canvas{
        border: 1px solid gray;
        width: 480px;
        height: 320px;
    }
    .grayscale{
        -webkit-filter: grayscale(1);
        -moz-filter: grayscale(1);
        -ms-filter: grayscale(1);
        -o-filter:grayscale(1);
        filter: grayscale(1);
    }
    .sepia{
        -webkit-filter: sepia(1);
        -moz-filter: sepia(1);
        -ms-filter: sepia(1);
        -o-filter:sepia(1);
        filter: sepia(1);
    }
    .invert{
        -webkit-filter: invert(1);
        -moz-filter: invert(1);
        -ms-filter: invert(1);
        -o-filter:invert(1);
        filter: invert(1);
    }

</style>
<body>
    <!-- autoplay 表示视频流处理完成后自动进行播放 -->
    <video autoplay>
    </video>
    <canvas>

    </canvas>
     <button id="capture">拍照</button>
<script src="../static/js/photoboth.js"> </script>
</body>
</html>